<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>el and data</title>
    <script
        type="text/javascript"
        src="../vue.js"
    ></script>
    </head>

    //MVVM模型：view，viewModel，model

    <body>
        <div id="part1">    //view：模板代码
            <h1>hello,{{name}}'s world</h1>
            <br><h1>my address is {{address}}</h1>
            <br><h1>test:{{$options}}</h1>
        </div>

        <script type="text/javascript">

            const vm = new Vue({    ////viewModel:vue实例模型
                //data第一种写法
                // el: '#root',
                //data第二种写法：函数式
                data(){   //model：数据
                    return{
                        name:'Marina',
                        address:'xxx',
                    }  //此时的this是vue实例对象
                }
            })

            console.log(vm);
            vm.$mount('#part1'); //指定当前vue实例为root容器服务，第二种写法，更为灵活
        </script>
    </body>


</html>